<template>
  <el-drawer
    v-model="drawer"
    :title="formModel.cate_id ? '编辑文章' : '添加文章'"
    label-width="120px"
    :close-on-click-modal="false"
    :direction="direction"
    size="50%"
  >
    <el-form ref="formRef" :model="formModel" class="demo-ruleForm">
      <el-form-item label="文章标题">
        <el-input v-model="formModel.title" />
      </el-form-item>
      <el-form-item label="文章分类">
        <el-select
          v-model="formModel.cate_id"
          placeholder="请选择"
          style="width: 100%"
        >
          <!-- label是展示的，value是值是提交的 -->
          <el-option
            v-for="item in cateListData"
            :key="item.cate_id"
            :label="item.cate_name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="文章封面">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :on-change="handleAvatarSuccess"
          :auto-upload="false"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon
            v-else
            class="avatar-uploader-icon"
            :size="40"
            color="#dcdfe6"
          >
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="文章内容">
        <div class="editor">
          <quill-editor
            ref="myQuillEditor"
            v-model:content="formModel.content"
            :options="data.editorOption"
            contentType="html"
          />
        </div>
      </el-form-item>
      <el-form-item style="padding-left: 70px">
        <el-button size="large" class="publish" @click="publish('已发布')"
          >发布</el-button
        >
        <el-button size="large" @click="publish('草稿')">暂存</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script setup>
import { ref, reactive } from "vue";
// 局部引入
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
const data = reactive({
  content: "",
  editorOption: {
    modules: {
      toolbar: [
        ["bold", "italic", "underline", "strike"],
        [{ size: ["small", false, "large", "huge"] }],
        [{ font: [] }],
        [{ align: [] }],
        [{ list: "ordered" }, { list: "bullet" }],
        [{ indent: "-1" }, { indent: "+1" }],
        [{ header: 1 }, { header: 2 }],
        ["image"],
        [{ direction: "rtl" }],
        [{ color: [] }, { background: [] }],
      ],
    },
    placeholder: "请输入内容...",
  },
});
const drawer = ref(false);
const direction = ref("rtl");
const formModel = ref({
  title: "",
  cate_id: "",
  cover_img: "",
  content: "",
  state: "",
});
// 文章分类下拉框
import { cateListApi, articlePublishApi } from "@/api/article";
const publish = (state) => {
  console.log(state, "发布状态");
  formModel.value.state = state;
  const fm = new FormData();
  for (let key in formModel.value) {
    fm.append(key, formModel.value[key]);
  }
  console.log(fm, "formModel");
  const res = articlePublishApi(fm);

  console.log(res, "res");

  // if (formModel.value.cate_id) {
  //     // 编辑
  // } else {
  //     // 添加
  // const res = await articlePublishApi(fm)
  //     ElMessage.success(res.message);
  //     drawer.value = false
  // }
};
let cateListData = ref([]);
const getCateList = async () => {
  const res = await cateListApi();
  cateListData.value = res.data;
  console.log(cateListData.value, "文章分类下拉框");
};
const open = (row) => {
  getCateList();
  drawer.value = true;
  if (row.id) {
    // 发请求回显数据
    formModel.value = { ...row };
    console.log(formModel.value);
  } else {
    formModel.value = {
      title: "",
      cate_id: "",
      cover_img: "",
      content: "",
      state: "",
    };
  }
};
defineExpose({
  drawer,
  open,
});
import { Plus } from "@element-plus/icons-vue";

const imageUrl = ref("");
const handleAvatarSuccess = (file) => {
  console.log(file, "上传成功");
  imageUrl.value = URL.createObjectURL(file.raw);
  formModel.value.cover_img = file.raw;
};
const beforeAvatarUpload = (rawFile) => {
  console.log(rawFile.size / 1024 / 1024, "上传前");
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("图片格式要求为 jpeg/png/jpg");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 20) {
    ElMessage.error("图片不能超过20MB!");
    return false;
  }
  return true;
};
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style lang="less" scoped>
:deep(.ql-editor) {
  min-height: 300px;
}

.publish {
  background-color: #415845;
  color: #fff;
}

:deep(.ql-formats) {
  height: 21px;
  line-height: 21px;
}

:deep(.ql-container.ql-snow) {
  width: 100% !important;
}

:deep(.el-form-item__label) {
  font-weight: 600 !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avatar {
  width: 178px !important;
  height: 178px !important;
}

:deep(.el-drawer__header) {
  padding-bottom: 20px;
  border-bottom: 1px solid #415845;
  margin-bottom: 0;
}
</style>

